<template>
	<view class="n1">
		<!-- 标题 -->
		<view class="money-title">
			免费好课
		</view>
		<view class="uni-product-list">
			<view class="uni-product" v-for="(product,index) in productList" :key="index">
				<view class="image-view">
					<image v-if="renderImage" class="uni-product-image" :src="product.image"></image>
				</view>
				<view class="uni-product-title">{{product.title}}</view>
				<view class="uni-product-price">
					<text class="">{{product.str}}</text>
					<text class="uni-product-price-original" style="padding-left: 22upx;">{{product.future}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'product-list',
				productList: [{
						image: 'https://edu-image.nosdn.127.net/2125530e4f2244089dd7f37e80c41967.jpg?imageView&quality=100&crop=6_0_2993_1686&thumbnail=225y125',
						title: '零基础PPT快速入门一叶知秋系列',
						str: "⭐⭐⭐ 4.0",
						future: "3128人学过",
						tip: '1900'
					},
					{
						image: 'https://edu-image.nosdn.127.net/f2215aa3b4f94ac3a15847c6cf75e496.jpg?imageView&quality=100&crop=0_0_460_268&thumbnail=225y125',
						title: 'Apple iPad 平板电脑 2018年新款9.7英寸',
						str: "⭐⭐ 2.0",
						future: "  210人学过",
						tip: '1900'
					},
					{
						image: 'https://edu-image.nosdn.127.net/2e360a73d8204717af5b7874a1f46864.jpg?imageView&quality=100&crop=0_0_1280_722&thumbnail=225y125',
						title: 'Apple MacBook Pro 13.3英寸笔记本电脑（2017款Core i5处理器/8GB内存/256GB硬盘 MupxT2CH/A）',
						str: "⭐⭐ 2.0",
						future: "  110人学过",
						tip: '3200'
					},
					{
						image: 'https://edu-image.nosdn.127.net/a11e1efae1794fd7b0f458363175f592.jpg?imageView&quality=100&crop=0_0_1080_608&thumbnail=225y125',
						title: 'Kindle Paperwhite电纸书阅读器 电子书墨水屏 6英寸wifi 黑色',
						str: "⭐ 1.0",
						future: "  63人学过",
						tip: '179'
					},

				],
				renderImage: true
			};
		},

	};
</script>

<style>
	
	.money-title {
		font-size: 30upx;
		height: 30upx;
		line-height: 30upx;
		padding-left: 30upx;
		margin-top: 15upx;
	}
	
	.uni-product-list {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		flex-direction: row;
	}

	.uni-product {
		padding: 20upx;
		display: flex;
		flex-direction: column;
	}

	.image-view {
		height: 300upx;
		width: 330upx;
		margin: 12upx 0;
	}

	.uni-product-image {
		height: 300upx;
		width: 350upx;
	}

	.uni-product-title {
		width: 300upx;
		word-break: break-all;
		display: -webkit-box;
		overflow: hidden;
		line-height: 1.5;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.uni-product-price {
		margin-top: 10upx;
		font-size: 28upx;
		line-height: 1.5;
		position: relative;
	}

	.uni-product-price-original {}

	.uni-product-price-favour {
		color: #888888;
		text-decoration: line-through;
		margin-left: 10upx;
	}

	.uni-product-tip {
		position: absolute;
		right: 10upx;
		background-color: #ff3333;
		color: #ffffff;
		padding: 0 10upx;
		border-radius: 5upx;
	}

	.swiper-item image {
		width: 100%;
	}
</style>
